<template>
	<view class="coupon_container height_79 fx fx_nw aic br_12 bc_primary box p_2" :style="[containerStyle]">
		<view class="fc fc_fff width_97">
			<view class="fz_24">
				<text class="fz_12">￥</text>
				{{data.amount||''}}
			</view>
			<view class="mt_7 fz_12" v-if="!!data.isDoorsill||data.minRestrict">
				满{{data.minRestrict||''}}可用
			</view>
		</view>
		<view class="ml_2 br_10 pr asstr flow_h fx_1" :style="[boxStyle]">
			<view class="pa t_0 l_0 ptb_2 plr_8 fb fz_10"
				style="border-radius: 0 0 24rpx 0;background: #FFD597;color: #9A620D;" :style="[typeStyle]" v-if="type">
				{{type}}
			</view>
			<view class="fx fx_nw jcb p_12 aistr">
				<view class="ptb_4 plr_8 fc_primary fx_1 flow_h" :style="[boxContentStyle]">
					<view class="fz_16 fb fe w100">
						{{data.name||data.discountCouponName}}
					</view>
					<view class="mt_4 fz_12">
						{{limitStr}}
					</view>
				</view>
				<view class="width_40 height_50 fz_12 bc_r fc_fff fx fx_col jcc aic br_4" :style="[btnStyle]"
					@click="handleReceive" v-if="useAble && showBtn">
					<view>
						立即
					</view>
					<view>
						{{(data.isReceive==2&&isReceive)?'领取':'使用'}}
					</view>
				</view>
				<view class="width_40 height_50 fz_12 bc_r fc_fff fx fx_col jcc aic br_4" :style="[btnStyle]"
					v-else-if="showBtn">
					<view>
						已经
					</view>
					<view>
						{{data.status==1?'使用':'过期'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api.js'
	export default {
		props: {
			data: {
				type: Object,
				default: () => ({})
			},
			index: {
				type: Number,
				default: 0,
			},
			showBtn: {
				type: Boolean,
				default: true
			},
			width: {
				type: String,
				default: ''
			},
			isReceive: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				platformInfo: this.$storage.getItem('platformInfo') || {},
			}
		},
		computed: {
			useAble() {
				if (this.isReceive) {
					return this.data.status == 1
				}
				return this.data.status == 0
			},
			containerStyle() {
				return {
					...this.width ? {
						width: this.width
					} : {},
					...!this.useAble ? {
						backgroundColor: '#C5C5C5',
						color: '#fff'
					} : {}
				}
			},
			boxStyle() {
				return !this.useAble ? {
					background: '#efefef',
				} : {
					background: '#FFF5F1',
				}
			},
			btnStyle() {
				return !this.useAble ? {
					'background-color': '#c5c5c5',
				} : (this.data.isReceive != 2 || !this.isReceive) ? {
					'background-color': '#FE0000'
				} : {
					'background-color': '#FE5A1C'
				}
			},
			limitStr() {
				if (this.data.useLimitType == 0) {
					return 0
				}
				if (this.data.useLimitType == 1) {
					return `领取后${this.data.useLimitDays}天内可用`
				}
				if (this.data.useLimitType == 2) {
					return `${this.data.useLimitBeginTime} 至 ${this.data.useLimitEndTime}`
				}
			},
			type() {
				switch (Number(this.data.type||this.data.discountCouponType)) {
					case 1:
						return '通用'
					case 2:
						return '商品'
					case 3:
						return '品类'
					default:
						return ''
				}
			},
			boxContentStyle() {
				return this.useAble ? {
				} : {
					color: '#777'
				}
			},
			typeStyle() {
				return this.useAble ? {} : {
					backgroundColor: '#DDDDDD',
					color: '#7D7D7D'
				}
			}
		},
		methods: {
			handleReceive() {
				if (this.data.isReceive != 2 || !this.isReceive) {
					return this.$emit('select', this.data)
				}
				this.$utils.loading()
				api.post('/marketing/applet/api/user/discount_coupon/receive', {
					discountCoupontId: [this.data.id * 1],
					receivePlatform: this.platformInfo.id
				}).then(res => {
					if(res.data) {
						this.$utils.showToast('领取成功', 1500, 0, '', 'success')
						setTimeout(() => {
							this.$emit('received', this.data, this.index)
						}, 1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.coupon_container {
		width: 686rpx;
	}
</style>